<!-- 等级推广佣金配置 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row type="flex" justify="space-between" :gutter="48">
                    <a-col :md="16">
                    </a-col>
                    <a-col :md="8">
                        <a-form-item >
                        <span>总开关：</span>
                        <a-switch checked-children="开" un-checked-children="关" :checked="allItem.onOff == 1 ? true : false" @change="changeAllOnOff"/>
                            <a-button style="margin-left: 20px" type="primary" icon="plus" @click="add()">新增</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="false" size="small">
            <div slot="awardModel" slot-scope="awardModel">
                <div v-for="(item,i) in moduleClassificationList" :key="i">
                    <a-tag v-if="item.id == awardModel" :color="colors[i]">{{item.name}}</a-tag>
                </div>
            </div>
            <div slot="accountType" slot-scope="accountType">
                <div v-for="(item,i) in accountTypeList" :key="i">
                    <span v-if="item.id == accountType">{{item.name}}</span>
                </div>
            </div>
            <div slot="onOff" slot-scope="onOff">
                <a-switch checked-children="开" un-checked-children="关" disabled :checked="onOff == 1 ? true : false" />
            </div>
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-button type="link" @click="update(record)">修改</a-button>
                    <!-- <a-popconfirm
                        title="是否确认删除当前等级分红配置?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="del(record)"
                    >
                        <a-button type="link" class="errorColor" >删除</a-button>
                    </a-popconfirm> -->
                </div>
            </template>
        </a-table>

        <!-- 添加、修改层级奖励配置 -->
        <a-modal
            title="添加、修改层级奖励配置"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            >
            <div>
                <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
                    <a-form-item label="奖励类型">
                        <a-select v-model="item.awardModel" placeholder="请选择" :disabled="item.id == '' ? false : true" allowClear>
                            <a-select-option v-for="(item,i) in moduleClassificationList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <!-- <a-form-item label="账户类型">
                        <a-select v-model="item.accountType" placeholder="请选择" allowClear>
                            <a-select-option v-for="(item,i) in accountTypeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                        </a-select>
                    </a-form-item> -->
                    <a-form-item label="状态">
                        <a-radio-group v-model="item.onOff" >
                            <a-radio :value="0">关闭</a-radio>
                            <a-radio :value="1">开启</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { columns } from './table';
import { queryBrand }  from '@/api/brand';
import { queryAwardModelConfig , updateAwardModelConfig , queryMooduleClassificationInfo } from '@/api/product';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            brandList: [],
            dataList: [],
            total: 0,
            page: 1,
            size: 99,
            moduleClassificationList: [
                // { id: 11, name: '消费'},
                // { id: 12, name: '还款'},
                // { id: 13, name: '快捷'},
                // { id: 14, name: '提现'},
                // { id: 15, name: '返利'},
                // { id: 10, name: '商城'},
                // { id: 3, name: '话费快充'},
                // { id: 7, name: '话费慢充'},
                // { id: 4, name: '会员权益'},
                { id: 16, name: '分享朋友圈奖励'},
            ],
            accountTypeList: [
                { id: 0, name: 'CNY'},
                // { id: 6, name: '能量水晶'},
            ],
            item: {
                id: '',
                awardModel: '',
                accountType: '0',
                onOff: '',
            },
            confirmLoading: false,
            isload: false,
            visible: false,
            columns,
            drawerVisible: false,
            colors: ['blue','purple','cyan','green','orange','red','pink','blueviolet'],
            allItem : {
                id: '',
                awardModel: '',
                accountType: '0',
                onOff: '',
            },
        };
    },
    async created(){
        try {
            // await this.getBrand()
            this.getAllData()
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        getBrand(){
            let _this = this
            let page = 0
            const fn = function(resolve){
                const params = {
                    'size':99,
                    'page':page,
                }
                queryBrand(params)
                .then(res=>{
                    if(res.success){
                        if(page == 0){
                            _this.brandList = res.data.content
                        }else{
                            _this.brandList = [..._this.brandList,...res.data.content]
                        }
                        if((res.data.totalElements > (page + 1) * 99)){
                            page++;
                            fn(resolve)
                        }else{
                            _this.brandId = _this.brandList[_this.brandList.length - 1].id
                            resolve()
                        }
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: res.errMessage,
                            duration: 8,
                        })
                    }
                })
            }
            return new Promise((resolve,rej)=>{
                fn(resolve)
            })
        },
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                'grade':_this.grade,
                'page':_this.page - 1,
                'size':_this.size,
            }
            queryAwardModelConfig(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    var list = res.data.content.filter(item=>{
                        if(item.awardModel != 0){
                            return item;
                        }else{
                            _this.allItem = JSON.parse(JSON.stringify(item));
                        }
                    })
                    _this.dataList = list
                    _this.total = _this.dataList.length
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 添加
        add(){
            if(!this.brandId){
                this.$message.warning('请先选择品牌')
                return
            }
            this.item.id = ''
            this.item.awardModel = 16
            this.item.brandId = this.brandId
            this.item.onOff = 1
            this.item.accountType = 0
            this.visible = true
        },
        // 修改
        update(item){
            this.item = JSON.parse(JSON.stringify(item))
            this.visible = true
        },
        // 确定添加、修改
        handleOk(){
            let _this = this
            _this.confirmLoading = true
            // if(_this.item.accountType === undefined){
            //     this.$message.warning('请选择奖励类型！');
            //     return
            // }
            const params = {
                'id':_this.item.id,
                'brandId':_this.item.brandId,
                'awardModel':_this.item.awardModel,
                'accountType':_this.item.accountType,
                'onOff':_this.item.onOff,
            }
            updateAwardModelConfig(params)
            .then(res=>{
                _this.confirmLoading = false
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: _this.item.id == '' ? '添加成功' : '修改成功',
                        duration: 8,
                    })
                    _this.visible = false
                    _this.getData()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 删除
        del(item){
            let _this = this
            const params = {
                'brandId':item.brandId,
                'id':item.id,
                'onOff': item.onOff,
                'awardModel':item.awardModel,
                'accountType':item.accountType,
                'isDelete':1,
            }
            updateAwardModelConfig(params)
            .then(res=>{
                if(res.success){
                    _this.visible = false
                    _this.getData()
                    _this.$notification['success']({
                        message: '提示',
                        description: '删除成功',
                        duration: 8,
                    })
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        async getAllData(){
            try {
                // await this.getClassification();
                this.getData()
            } catch (error) {
                this.$notification['error']({
                    message: '提示',
                    description: '网路丢失，请稍后再试！',
                    duration: 8,
                })
            }
        },
        // 修改总开关状态
        changeAllOnOff(){
            console.log(this.allItem)
            if(this.allItem.id == ''){
                return;
            }
            let _this = this
            const params = {
                'id':_this.allItem.id,
                'brandId':_this.allItem.brandId,
                'awardModel':_this.allItem.awardModel,
                'accountType':_this.allItem.accountType,
                'onOff':_this.allItem.onOff == 1 ? 0 : 1,
            }
            updateAwardModelConfig(params)
            .then(res=>{
                _this.confirmLoading = false
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '修改成功',
                        duration: 8,
                    })
                    _this.visible = false
                    _this.getData()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        }
    }
}

</script>
<style scoped>
td{
    width: 140px;
    height: 30px;
}
.green{
    color: #87d068;
}
</style>